<template>
	<div class="w100 h100 flex p-t-26 p-x-10 p-b-10">
		<div class="f1 w0 flex-col">
			<my-box title="信息发布">
				<h3 class="f-s-24 m-y-10">《{{ publishData.publishTitle }}》</h3>
				<p class="pre overflow-y-auto" style="max-height: 100px; line-height: 1.8rem">
					{{ publishData.publishContent }}
				</p>
			</my-box>
			<my-box class="f1 h0 m-t-10" title="信息列表">
				<template #right>
					<div class="flex">
						<div class="flex-center m-l-10">
							<my-date-picker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" v-model="queryParams.date" />
						</div>
						<div class="flex-center m-l-10">
							<my-input v-model="queryParams.likeTitle" :clearable="false" placeholder="搜索...">
								<template #suffix>
									<el-icon class="pointer" @click="refTable.reload()"><Search /></el-icon>
								</template>
							</my-input>
						</div>
					</div>
				</template>
				<my-list-panel ref="refTable" :total="state.total" :loadFn="loadData">
					<my-table
						:data="state.list"
						:columns="[
							{ prop: 'publishTitle', label: '标题', width: 200, showOverflowTooltip: true },
							{ prop: 'publishContent', label: '内容', showOverflowTooltip: true },
							{ prop: 'createBy', label: '发布人', width: 70 },
							{ prop: 'createTime', label: '发布时间', width: 160 }
						]"
					>
					</my-table>
				</my-list-panel>
			</my-box>
		</div>

		<my-box class="f1 w0 m-l-10" title="事件清单">
			<template #right>
				<div class="flex">
					<div class="flex-center m-l-10">
						<my-date-picker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" v-model="queryParams2.date" />
					</div>
					<div class="flex-center m-l-10">
						<my-input v-model="queryParams2.search" :clearable="false" placeholder="搜索...">
							<template #suffix>
								<el-icon class="pointer" @click="refTable2.reload()"><Search /></el-icon>
							</template>
						</my-input>
					</div>
				</div>
			</template>
			<my-list-panel ref="refTable2" :total="state2.total" :loadFn="loadData2">
				<my-table
					:data="state2.list"
					:columns="[
						{ prop: 'createBy', label: '成员', width: 70 },
						{ prop: 'eventDesc', label: '事件', showOverflowTooltip: true },
						{ prop: 'createTime', label: '时间', width: 160 }
					]"
				/>
			</my-list-panel>
		</my-box>
	</div>
</template>

<script setup name="/MakeDecision/emergency">
import { publishInfo, publishInfoList, eventList } from '@a/make-decision-emergency'
import mixin from '@u/mixin'

/********************************************************** 信息发布 ***********************************************************/
let publishData = ref({})
publishInfo().then((res) => {
	publishData.value = res.data
})

/********************************************************** 信息列表 ***********************************************************/
let queryFormItem = [{ itemType: 'date', prop: 'date', type: 'daterange', prepend: 'CreateTime' }],
	queryParams = ref({
		date: [],
		needCount: true
	}),
	state = reactive({
		total: 0,
		list: []
	})
const refTable = shallowRef(null)
const { loadData } = mixin({
	queryFormItem,
	queryParams,
	state,
	api: { page: publishInfoList },
	refTable
})

/********************************************************** 事件清单 ***********************************************************/
let queryFormItem2 = [{ itemType: 'date', prop: 'date', type: 'daterange' }],
	queryParams2 = ref({
		date: [],
		needCount: true
	}),
	state2 = reactive({
		total: 0,
		list: []
	})
const refTable2 = shallowRef(null)

const { loadData: loadData2 } = mixin({
	queryFormItem: queryFormItem2,
	queryParams: queryParams2,
	state: state2,
	api: { page: eventList },
	refTable: refTable2
})
</script>

<style lang="scss" scoped></style>
